<template>
	<view class="title">转账至</view>

	<view class="input-phone">
		<up-input
			placeholder="请输入提现人手机号"
			border="none"
			type="number"
			v-model="phone"></up-input>
	</view>

	<view class="title">提现金额</view>
	<view class="money">
		<view class="input">
			<view>¥</view>
			<up-input
				placeholder="请输入金额"
				border="none"
				type="number"
				v-model="money"></up-input>
			<view @click="money = userinfo.balance">全部</view>
		</view>
		<view class="money-usable">可转账金额¥{{userinfo.balance}}</view>
	</view>

	<view class="btn" @click="throttle(submit)">立即转账</view>
	<view class="tips">温馨提示：转账收款人必须是本系统内有效用户</view>
</template>

<script setup>
	import { throttle } from '@/uni_modules/uview-plus';
	import { ref, reactive } from 'vue';
	import api from '../../api/api';
	import { useCounterStore } from '../../stores/user';
	import { storeToRefs } from 'pinia'
	const user = useCounterStore()
	const { userinfo } = storeToRefs(user)

	const money = ref('')
	const phone = ref('')

	function submit() {
		let reg_tel = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
		if (!reg_tel.test(phone.value)) return uni.$showMsg('手机号格式不对!')
		if (!money.value) return uni.$showMsg('请输入数量!')

		api.user.user_send_balance({
			money: money.value,
			phone: phone.value
		}).then(res => {
			uni.$showMsg("赠送成功", "success")
			setTimeout(() => {
				uni.navigateBack({
					delta: 2
				})
			}, 1000)
		})
	}
</script>

<style lang="scss">
	.title {
		padding: 32rpx;
		font-weight: 600;
		font-size: 32rpx;
		color: #333333;
	}

	.input-phone {
		padding: 32rpx 64rpx;
	}

	.money {
		padding: 0 32rpx;
		width: 686rpx;
		background: #FFFFFF;
		border-radius: 12rpx;
		margin: 32rpx auto 0;

		.input {
			font-weight: 600;
			font-size: 48rpx;
			color: #333333;
			display: flex;
			align-items: center;
			padding-bottom: 20rpx;
			border-bottom: 1px solid #e2e2e2;

			>view:nth-child(1) {
				margin-right: 20rpx;
			}

			>view:nth-child(3) {
				font-weight: 400;
				font-size: 28rpx;
				color: #F6941D;
				margin-left: 20rpx;
			}
		}

		.money-usable {
			font-weight: 400;
			font-size: 28rpx;
			color: #999999;
			margin-top: 20rpx;
		}
	}

	.btn {
		width: 686rpx;
		height: 100rpx;
		line-height: 100rpx;
		background: #F6941D;
		border-radius: 12rpx;
		font-weight: 600;
		font-size: 28rpx;
		color: #FFFFFF;
		margin: 0 auto;
		margin-top: 64rpx;
		text-align: center;
	}

	.tips {
		font-weight: 400;
		font-size: 24rpx;
		color: #999999;
		text-align: center;
		margin-top: 20rpx;
	}
</style>